<template>
  <el-card class="box-card el-card-flex">
    <div slot="header" class="clearfix">
      <span><i class="el-icon-s-cooperation"></i>组织档案</span>
    </div>
    <div class="text item">
      <el-form :inline="true" class="demo-form-inline" label-width="100px" @submit.native.prevent>
        <el-form-item>
          <el-input v-model="textSearch" @keyup.enter.native="archivesSearch" @clear="clearArchivesSearch" clearable
            placeholder="请输入企业名称" style="width:240px;">
            <el-button slot="append" icon="el-icon-search" @click="archivesSearch"></el-button>
          </el-input>
        </el-form-item>
        <el-button type="primary" style="margin-left: 10px;" @click="seniorSearchDialog">
          高级查询
          <i class="el-icon-magic-stick"></i>
        </el-button>
        <el-form-item style="float:right">
          <div style="display: inline-block; margin-right: 5px;">
            <!-- <el-upload class="upload-demo" ref="upload" action="/api/ccms/org/enterprise/import" :headers="{Authorization: this.Authorization}"
              :show-file-list='false' :on-success="handleSuccess" :before-upload='handleBefore' :file-list="fileList">
              <el-button slot="trigger" plain size="small" type="primary">批量上传<i class="el-icon-upload el-icon--right"></i></el-button>
            </el-upload> -->
            <el-popover placement="bottom" width="200" trigger="hover">
              <ul class='ul-text'>
                <li>
                  <el-link :underline="false" class='li-text' @click='allAdd'>批量导入新增</el-link>
                </li>
                <li>
                  <el-link :underline="false" class='li-text' @click='allEdit'>批量导入更新</el-link>
                </li>
                <!-- <li>
                  <el-link :underline="false" class='li-text'>批量删除</el-link>
                </li> -->
              </ul>
              <el-button type="primary" slot="reference" plain>
                批量操作
                <i class="el-icon-upload"></i>
              </el-button>
            </el-popover>
          </div>
          <el-button type="primary" @click='excelDownload' plain>
            导入模板下载
            <i class="el-icon-download"></i>
          </el-button>
          <el-button type="primary" @click='archivesAdd(addParams)' plain>
            新增
            <i class="el-icon-plus"></i>
          </el-button>
        </el-form-item>
      </el-form>
      <!-- 表格 -->
      <div class="el-flex el-box-column">
        <el-table :data="tableData" border stripe style="width: 100%" height="100%" ref='tableData'>
          <el-table-column type="index" min-width="50px" label="序号" align="center" sortable show-overflow-tooltip></el-table-column>
          <el-table-column prop="creditCode" label="社会统一信用代码" min-width="160px" sortable :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="orgCode" label="组织档案编码" min-width="130px" sortable :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="name" label="组织名称" min-width="100px" sortable :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="regStatus" label="企业状态" min-width="100px" sortable :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span v-for="(item,index) in companyStatus" :key='index'>{{scope.row.regStatus==item.id?item.name:''}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="taxNumber" label="纳税人识别号" min-width="130px" sortable :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="orgNumber" label="组织机构代码" min-width="130px" sortable :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="alias" label="简称" min-width="70px" sortable :show-overflow-tooltip="true"></el-table-column>
          <el-table-column label="操作" width="110px" sortable align="center" fixed="right">
            <template slot-scope="scope">
              <el-button class="td-btn-icon" type="text" title="编辑" @click='handleTaskEdit(scope.$index, scope.row)'
                icon="el-icon-edit"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="total" :page-size="size"
          :current-page="page" @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
        <!-- 高级查询 -->
        <el-drawer title="高级查询" :before-close="handleAgentSearchClose" :visible.sync="dialogAgentSearchVisible"
          direction="rtl" custom-class="demo-drawer" ref="drawer" :close-on-press-escape="false">
          <div class="demo-drawer__content el-box-column" style="height: 100%; margin-left: 18px;">
            <el-form label-width="130px" :model="seniorFormData" ref="seniorFormData" class="el-flex">
              <el-form-item label="社会统一信用代码:" prop="creditCode">
                <el-col :span="18">
                  <el-input placeholder="请输入社会统一信用代码" v-model="seniorFormData.creditCode"></el-input>
                </el-col>
              </el-form-item>
              <el-form-item label="组织名称:">
                <el-col :span="18">
                  <el-input placeholder="请输入组织名称" v-model="seniorFormData.name"></el-input>
                </el-col>
              </el-form-item>
              <el-form-item label="组织档案编码:">
                <el-col :span="12">
                  <el-input placeholder="请输入组织档案编码" v-model="seniorFormData.orgCode"></el-input>
                </el-col>
              </el-form-item>
              <el-form-item label="企业状态:">
                <el-col :span="16">
                  <el-select placeholder="请选择企业状态" v-model="seniorFormData.regStatus">
                    <el-option v-for="item in companyStatus" :key="item.id" :label="item.name" :value="item.id"></el-option>
                  </el-select>
                </el-col>
              </el-form-item>
              <el-form-item label="纳税人识别号:">
                <el-col :span="18">
                  <el-input placeholder="请输入纳税人识别号" v-model="seniorFormData.taxNumber"></el-input>
                </el-col>
              </el-form-item>
              <el-form-item label="法人名称:">
                <el-col :span="18">
                  <el-input placeholder="请输入法人名称" v-model="seniorFormData.legalPersonName"></el-input>
                </el-col>
              </el-form-item>
            </el-form>
            <div class="demo-drawer__footer" style="text-align: right; margin-bottom: 10px; padding-right:10px;">
              <el-button type="primary" @click="handleSearchSure">
                确定
                <i class="el-icon-document-checked el-icon"></i>
              </el-button>
              <el-button @click="handleSearchClose">
                重置
                <i class="el-icon-refresh-left"></i>
              </el-button>
            </div>
          </div>
        </el-drawer>
        <!-- 批量导入新增弹框 -->
        <el-dialog class='dialog-body-style' title="批量导入新增" :visible.sync="allAdddialogVisible" width="20%"
          :close-on-click-modal="false" :close-on-press-escape="false">
          <el-form>
            <el-form-item>第一步：导出模板</el-form-item>
            <el-form-item>导出标准模板</el-form-item>
            <el-form-item>
              <el-button type="primary" @click="excelDownload">导出模板</el-button>
            </el-form-item>
            <el-form-item>第二步：导入文件</el-form-item>
            <el-form-item>导入(无需填写组织档案编码)</el-form-item>
            <el-form-item>
              <el-upload class="upload-demo" ref="upload" action="/api/ccms/org/enterprise/import" :headers="{Authorization: this.Authorization}"
                :show-file-list='false' :on-success="handleSuccess" :before-upload='handleBefore' :file-list="fileList">
                <el-button slot="trigger" size="small" type="primary">导入文件</el-button>
              </el-upload>
            </el-form-item>
          </el-form>
        </el-dialog>
        <!-- 批量导入编辑弹框 -->
        <el-dialog class='dialog-body-style' title="批量导入更新" :visible.sync="allEditdialogVisible" width="20%"
          :close-on-click-modal="false" :close-on-press-escape="false">
          <el-form>
            <el-form-item>第一步：导出模板</el-form-item>
            <el-form-item>导出已有信息进行编辑</el-form-item>
            <el-form-item>
              <el-button type="primary" @click="excelDownload">导出记录</el-button>
            </el-form-item>
            <el-form-item>第二步：导入文件</el-form-item>
            <el-form-item>导入编辑更新后的信息(组织档案编码必填)</el-form-item>
            <el-form-item>
              <el-upload class="upload-demo" ref="upload" action="/api/ccms/org/enterprise/import" :headers="{Authorization: this.Authorization}"
                :show-file-list='false' :on-success="handleSuccess" :before-upload='handleBefore' :file-list="fileList">
                <el-button slot="trigger" size="small" type="primary">导入文件</el-button>
              </el-upload>
            </el-form-item>
          </el-form>
        </el-dialog>
        <!-- 批量上传 结果报错-->
        <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" title="批量上传结果" :visible.sync="errorTableDdialog">
          <el-table border width="100%" stripe ref="errorTable" :data="errorTable">
            <el-table-column type="index" min-width="50px" label="序号" align="center" sortable show-overflow-tooltip></el-table-column>
            <el-table-column label="失败原因" min-width="100px">
              <template slot-scope="scope">
                {{scope.row}}
              </template>
            </el-table-column>
          </el-table>
          <span slot="footer" class="dialog-footer">
            <el-button type="danger" @click="errorTableDdialog = false">关闭 <i class="el-icon-close"></i></el-button>
          </span>
        </el-dialog>
      </div>
    </div>
  </el-card>
</template>
<script>
  import {
    Dialog,
    Table,
    TableColumn,
    Pagination,
    MessageBox,
    Message,
    Drawer,
    Upload,
    Popover,
    Link
  } from 'element-ui'
  import {
    archiveList, //组织档案查询
    archiveSearch, //组织档案搜索
    archiveSeniorSearch, //组织档案高级查询
    comboBoxDataSelect, //下拉通用接口
    downLoad,//导出
  } from '@/api/org/orgnizationArchives/orgnizationArchives.js'
  export default {
    components: {
      'el-dialog': Dialog, // 对话框
      'el-table': Table, // 表格
      'el-table-column': TableColumn, // 表格列
      'el-pagination': Pagination, // 分页
      'el-drawer': Drawer, // 抽屉
      'el-upload': Upload, //上传
      'el-popover': Popover,
      'el-link': Link,
    },
    data() {
      return {
        page: 1, //表格初始页数
        size: 20, //表格初始化条数
        dialogAgentSearchVisible: false,
        addParams: { //新增传递参数
          'title': '新增',
          'enabled': "Y",
        },
        tableData: [], //表格数据
        textSearch: '', //搜索值
        total: 0, //表格总条数
        companyStatus: [], //企业状态
        searchStyle: 1, //查询类型
        seniorFormData: {}, //高级查询表单
        fileList: [], //上传列表
        Authorization: '',
        errorTableDdialog: false, //上传错误弹框
        errorTable: [], //
        allAdddialogVisible: false, //批量导入新增弹框
        allEditdialogVisible: false, //批量导入新增弹框
      }
    },
    created() {
      this.Authorization = this.getCookie('Authorization')
      this.getTableData() //获取表格数据源
      this.getCompanyStatus() //获取企业状态
      window.onresize = () => {
        this.$refs.tableData.doLayout() //监听窗口变化，重绘表格布局
      }
    },
    methods: {
      getCookie(cname) { // 获取cookie
        var name = cname + "="
        var ca = document.cookie.split(';')
        for (var i = 0; i < ca.length; i++) {
          var c = ca[i].trim()
          if (c.indexOf(name) == 0) return c.substring(name.length, c.length)
        }
        return ""
      },
      getTableData() { //表格数据源
        let data = {
          page: this.page,
          size: this.size
        }
        archiveList(data).then(res => {
          if (res.data.code == 10000) {
            this.tableData = res.data.data.records
            this.total = res.data.data.total
          }
        })
      },
      getCompanyStatus() { //获取企业状态
        comboBoxDataSelect('3a3e807fb3de4652b6c79572f993b903').then(res => {
          if (res.data.code == 10000) {
            this.companyStatus = res.data.data
          }
        })
      },
      seniorSearchDialog() { //打开高级查询
        this.textSearch = ''
        this.dialogAgentSearchVisible = true
      },
      handleSearchSure() { //高级查询确认
        let data = {
          page: 1,
          size: 20,
          creditCode: this.seniorFormData.creditCode,
          name: this.seniorFormData.name,
          orgCode: this.seniorFormData.orgCode,
          regStatus: this.seniorFormData.regStatus,
          taxNumber: this.seniorFormData.taxNumber,
          legalPersonName: this.seniorFormData.legalPersonName
        }
        this.searchStyle = 3
        archiveSeniorSearch(data).then(res => {
          if (res.data.code == 10000) {
            this.tableData = res.data.data.records
            this.total = res.data.data.total
          }
        })
        this.dialogAgentSearchVisible = false
      },
      handleSearchClose() { //高级查询重置
        this.seniorFormData = {
          creditCode: '',
          name: '',
          orgCode: '',
          regStatus: '',
          taxNumber: '',
          legalPersonName: ''
        }
        this.page = 1
        this.size = 20
        this.searchStyle = 1
        this.getTableData()
        this.dialogAgentSearchVisible = false
      },
      handleAgentSearchClose() {
        this.dialogAgentSearchVisible = false;
      },
      archivesSearch() { //普通查询
        let data = {
          page: 1,
          size: 20,
          name: this.textSearch
        }
        this.searchStyle = 2
        if (data.name && data.name != '/' && data.name != '\\' && data.name != '|') {
          archiveSearch(data).then(res => {
            if (res.data.code == 10000) {
              this.tableData = res.data.data.records
              this.total = res.data.data.total
            }
          })
        }
      },
      clearArchivesSearch() { //清空查询
        this.searchStyle = 1
        this.page = 1
        this.size = 20
        this.getTableData()
      },
      handleTaskEdit(index, row) { //编辑
        row.title = "编辑"
        this.jumpRouter(row)
      },
      archivesAdd(row) { //新增
        this.jumpRouter(row)
      },
      jumpRouter(row) { //动态路由跳转
        this.$router.addRoutes(this.multiRouters([{
          path: 'addEditOrgnizatonArchives',
          name: 'addEditOrgnizatonArchives', //自定义name名称
          component: () => import('@/views/org/orgnizationArchives/addEditOrgnizatonArchives'),
          meta: {}
        }]));
        this.$router.push(this.routerMatch({
          name: "addEditOrgnizatonArchives", //顶部导航+侧边导航
          params: {
            row: row
          }
        }))
      },
      sameFunction() { //分页想同方法
        if (this.searchStyle == 1) {
          this.getTableData()
        } else if (this.searchStyle == 2) {
          let data = {
            page: this.page,
            size: this.size,
            name: this.textSearch
          }
          archiveSearch(data).then(res => {
            if (res.data.code == 10000) {
              this.tableData = res.data.data.records
              this.total = res.data.data.total
            }
          })
        } else {
          let data = {
            page: this.page,
            size: this.size,
            creditCode: this.seniorFormData.creditCode,
            name: this.seniorFormData.name,
            orgCode: this.seniorFormData.orgCode,
            regStatus: this.seniorFormData.regStatus,
            taxNumber: this.seniorFormData.taxNumber,
            legalPersonName: this.seniorFormData.legalPersonName
          }
          archiveSeniorSearch(data).then(res => {
            if (res.data.code == 10000) {
              this.tableData = res.data.data.records
              this.total = res.data.data.total
            }
          })
        }
      },
      handleSizeChange(val) { //条数切换
        this.size = val
        this.sameFunction()
      },
      handleCurrentChange(val) { //页数切换
        this.page = val
        setTimeout(() => {
          this.sameFunction()
        }, 10);
      },
      handleSuccess(response, file, fileList) { //上传成功
        if (response.code == 10000 && response.data == true) {
          Message({
            message: '上传成功',
            type: 'success'
          });
        } else {
          if (response.data == null) {
            Message({
              message: response.msg,
              type: 'error'
            });
          } else {
            this.errorTableDdialog = true
            this.errorTable = response.data
          }

        }
        this.fileList = []
		this.getTableData()
      },
      handleBefore(file) { //文件上传之前
        let fileTextClass = file.name.substring(file.name.lastIndexOf(".") + 1);
        const fileTextStyle = fileTextClass === "xlsx" || fileTextClass === "xls"
        if (!fileTextStyle) {
          Message({
            message: "上传文件只能是xlsx / xls 格式!",
            type: "error"
          })
        }
      },
      excelDownload() { //模板下载
      downLoad().then((response) => {
          let fileName = response.headers['content-disposition']
          let realFileName = ""
          realFileName = fileName.substring(21, fileName.length - 1);
          const url = window.URL.createObjectURL(new Blob([response.data]));
          const link = document.createElement('a');
          link.href = url;
          link.setAttribute('download', realFileName);
          document.body.appendChild(link);
          link.click();
        })
      },
        allAdd() { //批量导入新增
        this.allAdddialogVisible = true
      },
      allEdit() { //批量导入编辑
        this.allEditdialogVisible = true
      },
    }
  }
</script>
<style>
  .ul-text{
    text-align: center;
  }
</style>
